<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        img{width:100px;height:100px;}
    </style>
</head>
<body>
    <h2>这是个人中心 <small><a href="./index.html">去首页</a></small> </h2>
    <div id="avatar">
        <img src="https://iph.href.lu/100x100?text=千锋H5" alt="">
        <form action="http://localhost:3000/setavatar" method="post" enctype="multipart/form-data">
            <input type="text" class="token" name="token" readonly style="opacity:0;position: absolute;z-index: -1;">
            <input type="file" name="avatar" style="position: relative;">
            <input type="submit" value="修改头像">
        </form>
    </div>
    <br>
    原密码：<input type="text" id="oldpw"><br>
    新密码：<input type="text" id="pw"><br>
    <input type="button" value="修改密码" id="changePW">
    <br>
    <br>
    用户名：<span id="username"></span><br>
    昵称：<input type="text" id="nickName"><br>
    手机号：<input type="text" id="tel"><br>
    年龄：<input type="text" id="age"><br>
    性别：<input type="text" id="sex"><br>
    邮箱：<input type="text" id="email"><br>
    婚否：
        <input type="radio" name="isMarried" value="1">已婚
        <input type="radio" name="isMarried" value="0">未婚<br>
    爱好：
        <input type="checkbox" name="hobby" value="篮球">篮球
        <input type="checkbox" name="hobby" value="足球">足球
        <input type="checkbox" name="hobby" value="排球">排球<br>
    等级：<span id="power">普通会员</span><br>

    <input type="button" value="修改个人信息" id="changeInfo">

</body>
<script src="./js/ajax.js"></script>
<script src="./js/Toast.js"></script>
<script>

    $(".token").value = sessionStorage.getItem("token");

    // 1. 立即发起个人信息请求
    ajax({
        url:"http://localhost:3000/getuser",
        data:{
            token: sessionStorage.getItem("token")
        },
        success(res){
            // 2. 请求成功后，解析数据
            res = JSON.parse(res)
            // 3. 判断是否获取个人信息成功
            if(res.code === 0){
                new Toast({
                    text:"登录失效，请重新登录",
                    color:"red",
                    callback:()=>{
                        location.assign("./login.html")
                    }
                })
            }else if(res.code === 1){
                // 4. 获取个人信息成功，准备渲染到页面
                $("#username").innerText = res.data.username;
                $("#tel").value = res.data.tel || "";
                $("#email").value = res.data.email || "";
                $("#avatar img").src = res.data.avatar || "https://iph.href.lu/100x100?text=千锋H5";
                $("#nickName").value = res.data.nickName || "";
                $("#age").value = res.data.age || "";
                $("#sex").value = res.data.sex || "";
                // 渲染会员等级
                switch(res.data.power){
                    case 0:$("#power").innerText = "普通用户";break;
                    case 1:$("#power").innerText = "普通会员";break;
                    case 2:$("#power").innerText = "超级会员";break;
                }
                // 渲染婚否
                const isMary = res.data.isMarried || false;
                [...$$("input[name=isMarried]")].forEach(val=>{
                    if(val.value == isMary){
                        val.checked = true;
                    };
                });
                // 渲染爱好
                [...$$("input[name=hobby]")].forEach(val=>{
                    if(res.data.hobby.indexOf(val.value) !== -1){
                        val.checked = true;
                    }
                })
            }
        }
    })

    // 5. 修改基本信息
    $("#changeInfo").onclick = function(){
        // 6. 获取婚否
        let isMary;
        [...$$("input[name=isMarried]")].forEach(val=>{
            if(val.checked){
                isMary = val.value;
            }
        });
        // 7. 获取爱好
        let hobby = [];
        [...$$("input[name=hobby]")].forEach(val=>{
            if(val.checked){
                hobby.push(val.value);
            }
        })
        // 8. 获取所有个人信息，打包成对象，注意数据类型的处理
        const info = {
            username: $("#username").innerText,
            nickName: $("#nickName").value,
            tel: $("#tel").value,
            email: $("#email").value,
            age: $("#age").value,
            sex: $("#sex").value,
            isMarried: isMary,
            hobby,
            token: sessionStorage.getItem("token")
        }
        // 9. 开启修改基本信息的ajax请求
        ajax({
            type:"post",
            url:"http://localhost:3000/setUser",
            data:info,
            success:(res)=>{
                // 10. 修改个人信息请求完成
                res = JSON.parse(res)
                if(res.code === 0){
                    new Toast({
                        text:"登录失效，请动作快点",
                        color:"red",
                        callback(){
                            location.href = "./login.html";
                        }
                    })
                }else{
                    new Toast({
                        text:"修改成功",
                        color:"green"
                    })
                }
            }
        })
    }

    // 11. 修改密码
    $("#changePW").onclick = function(){
        ajax({
            type:"post",
            url:"http://localhost:3000/setpassword",
            data:{
                oldpw: $("#oldpw").value,
                password: $("#pw").value,
                token: sessionStorage.getItem("token")
            },
            success:res=>{
                res = JSON.parse(res);
                if(res.code === 0){
                    new Toast({
                        text:"登录失效，请动作快点",
                        color:"red",
                        callback(){
                            location.href = "./login.html";
                        }
                    })
                }else if(res.code === 1){
                    new Toast({
                        text:"修改成功",
                        color:"green"
                    })
                }else{
                    new Toast({
                        text:"原密码不对，请重试",
                        color:"red",
                        callback:()=>{
                            $("#oldpw").value = "";
                            $("#oldpw").focus();
                        }
                    })
                }
            }
        })
    }

    // 12. 修改头像
    
    function $(sel){
        return document.querySelector(sel);
    }
    function $$(sel){
        return document.querySelectorAll(sel);
    }

</script>
</html>